// import logo from './logo.svg';
import './App.css';
import Header from './Header'
import Content  from './Content'
import Footer from './Footer'

import React, { Component } from 'react';
import { nanoid } from 'nanoid';

class App extends Component {

  // 我们把所有的待办事项的数组写在了根组件的state里，由于我们还没有学习到子传父、兄弟组件之间的传参，所以我们把数据都写在了根组件。
  state = {
    todos:[
      {
        id:nanoid(),
        name:'吃饭',
        done:false
      },{
        id:nanoid(),
        name:'睡觉',
        done:true
      },
      {
        id:nanoid(),
        name:'打代码',
        done:false
      }
    ]
  }

  // 这里有个小知识点，我们写在根组件里的函数，如果通过props传递给子组件，子组件通过this.props.xxxx()调用，函数里的内容是在根组件中执行的。比如这个案例中的东西，setState就会在根组件里执行，所以实现了添加待办事项的功能。
  addTodo = (todo)=>{
    const {todos}  = this.state
    todos.push(todo)
    this.setState({todos})
  }

  // 这个原理和上面的addTodo一样的，不过这个比那个复杂点。难点在于Item是Content的儿子、而Content又是App的组件，所以我们的这个updateTodo方法需要App通过props传递给Content组件，然后Content组件又通过一样的方式传递给Item组件，然后Item组件调用，即可实现在App中更新todos
  updateTodo = (id,done)=>{
    const {todos} = this.state
    todos.forEach((item)=>{
      if(item.id==id){
        item.done = done
      }
    }) 
    this.setState({todos})
    console.log(this.state.todos);
  }

  // 删除一个待办事项的功能也类似，写在App里，因为todos数组就在App的state里，然后通过props传给Content组件，再传给Item组件。这个功能的实现也很简单，从Item里拿到要删除的待办事项的id，然后通过filter也就是过滤器的筛选，把所有的不是这个id的待办事项筛出来，然后setState即可实现删除功能。
  deleteTodo = (id)=>{
    let {todos} = this.state
    if(window.confirm('确认删除？')){
      todos = todos.filter((item)=>item.id!==id)
    }
    this.setState({todos})
  }

  selectAll = (e)=>{
    let {todos} = this.state
    todos.forEach((item)=>{
      item.done = e.target.checked
    })
    this.setState({todos})
  } 

  clearAllFinished = ()=>{
    let {todos} = this.state
    todos = todos.filter(item=>!item.done)
    this.setState({todos})
  }


  render() {
    return (
      <div className="App">
        <Header addTodo={this.addTodo}/>
        <Content todos={this.state.todos} updateTodo={this.updateTodo} deleteTodo={this.deleteTodo}/>
        <Footer todos={this.state.todos} selectAll={this.selectAll} clearAllFinished={this.clearAllFinished}/>
      </div>
    );
  }
}

export default App;
